<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="展示个人作品和学习历程的一个静态网站">
  <meta name="keywords" content="官网，个人作品">
  <title>穆土科技有限公司-个人公司网站</title>
  <!-- 在样式表前导入 -->
  <script src="./libs/scrollreveal/scrollreveal.min.js"></script>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./libs/glide/glide.core.min.css">
  <link rel="stylesheet" href="./libs/glide/glide.theme.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- 头部 -->
  <header>
    <!-- logo -->
    <div class="logo">穆土科技</div>
    <!-- 导航条 -->
    <nav>
      <a href="#glide">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#case">成功案例</a>
      <a href="#service">服务流程</a>
      <a href="#team">团队介绍</a>
      <a href="#dynamic">公司动态</a>
      <i class="iconfont icon-fangdajing"></i>
    </nav>
    <!-- 汉堡按钮, 屏幕缩放时显示的 -->
    <div class="burger">
      <div class="burgers">
        <div class="burger-line1"></div>
        <div class="burger-line2"></div>
        <div class="burger-line3"></div>
      </div>
    </div>
  </header>

  <!-- 轮播图 -->
  <div class="glide" id="glide">
    <!-- 轮播主体 -->
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <div class="text">
            <h1>让临时的想法，变成实际可行的行动。</h1>
            <p>我们总有一些突发而有趣的想法，我们要去记录他们，然后试着把他们变成实际可行的行动或事物。</p>
            <button class="text-white go">探索思维</button>
          </div>
          <!-- 覆盖层 -->
          <div class="cover"></div>
          <!-- 背景图片 -->
          <img src="./images/33.jpg" alt="轮播图1">
        </li>
        <li class="glide__slide">
          <div class="text left">
            <h1>让临时突发的想法，变成实际可行的行动吧。</h1>
            <p>有时，我们总有一些突发而有趣的想法，我们要去记录他们，然后试着把他们变成实际可行的行动或事物。</p>
            <button class="text-lightest go">探索思维</button>
          </div>
          <!-- 覆盖层 -->
          <div class="cover"></div>
          <!-- 背景图片 -->
          <img src="./images/44.jpg" alt="轮播图1">
        </li>
        <li class="glide__slide">
          <div class="text right">
            <h1>行动!</h1>
            <p>挥起你手中的命运鱼竿。</p>
            <button class="text-lightest go">调动思维</button>
          </div>
          <!-- 覆盖层 -->
          <div class="cover"></div>
          <!-- 背景图片 -->
          <img src="./images/55.jpg" alt="轮播图1">
        </li>
      </ul>
    </div>

    <!-- 轮播箭头 -->
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
    </div>

    <!-- 小圆点 -->
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>
    </div>
  </div>

  <!-- 因为 glide 设置为 相对定位，他还占据原来的位置 -->
  
  <!-- 关于我们 -->
  <div class="about-us" id="about-us">
    <section>
      <div class="title">
        <h2>关于我们</h2>
        <p>本公司提供域名注册，PC网站开发，移动app开发，微信小程序开发，网络运营 和 网络维修运营的企业。</p>
      </div>
      <div class="list">
        <div class="item">
          <i class="iconfont icon-tubiaosvg-"></i>
          <div class="right">
            <h3>品牌设计</h3>
            <div class="bottom-text">
              根据企业的类型，设计独特的相关产品
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-tradingvolume"></i>
          <div class="right">
            <h3>市场营销</h3>
            <div class="bottom-text">
              通过市场分析，定制营销方案
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-gouwuche1"></i>
          <div class="right">
            <h3>电子商务</h3>
            <div class="bottom-text">
              根据企业的需求，定制不同的网络购买方案
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-wangyesheji"></i>
          <div class="right">
            <h3>网页设计</h3>
            <div class="bottom-text">
              设计符合企业业务的页面结构 和 系列电子界面
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-weixin"></i>
          <div class="right">
            <h3>微信小程序</h3>
            <div class="bottom-text">
              根据网站功能，开发小程序应用
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-fuwuqi"></i>
          <div class="right">
            <h3>网站搭建</h3>
            <div class="bottom-text">
              把企业的网站发布到网上，给全部人访问
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 成功案例 -->
  <div class="case" id="case">
    <section>
      <!-- 标题 -->
      <div class="case-title">
        <h2>成功案例</h2>
        <div class="bats">
          <!-- data-filter 为点击按钮时， 要筛选中的关键字 -->
          <button class="bat active" data-filter="*">全部</button>
          <button class="bat" data-filter=".web">Web</button>
          <button class="bat" data-filter=".app">App</button>
          <button class="bat" data-filter=".open">开源</button>
        </div>
      </div>
      <!-- 内容 -->
      <div class="case-grid">
        <div class="case-item web">
          <a href="./page/wzry.html">
            <img src="./images/wzry01.jpg" alt="案例图片">
          </a>
        </div>
        <div class="case-item web">
          <img src="./images/16.jpg" alt="案例图片">
        </div>
        <div class="case-item open">
          <img src="./images/17.jpg" alt="案例图片">
        </div>
        <div class="case-item open web">
          <img src="./images/18.jpg" alt="案例图片">
        </div>
        <div class="case-item web app">
          <img src="./images/19.jpg" alt="案例图片">
        </div>
        <div class="case-item app">
          <img src="./images/20.jpg" alt="案例图片">
        </div>
        <div class="case-item app open">
          <img src="./images/23.jpg" alt="案例图片">
        </div>
        <div class="case-item web app">
          <img src="./images/24.jpg" alt="案例图片">
        </div>
      </div>
    </section>
  </div>

  <!-- 服务流程 -->
  <div class="service" id="service">
    <section>
      <!-- 标题 -->
      <div class="service-title">
        <h2>服务流程</h2>
        <p class="text-dark-gray">公司包括提供基础的网络服务（如购买域名，维护网站）和 网络增值服务（如网络建设，推广 和 网络优化）等业务</p>
      </div>
      <!-- 内容 -->
      <div class="service-darker">
        <div class="service-item">
          <i class="iconfont icon-goutong"></i>
          <div class="text">
            <h3>需求沟通</h3>
            <p>客户提出网站的基本需求 和 设计风格，功能等需求</p>
          </div>
        </div>
        <div class="service-item">
          <i class="iconfont icon-goutong"></i>
          <div class="text">
            <h3>项目评估</h3>
            <p>根据客户提出的需求，评估项目所需的时间和费用</p>
          </div>
        </div>
        <div class="service-item">
          <i class="iconfont icon-hetong"></i>
          <div class="text">
            <h3>签订合同</h3>
            <p>双方达成工期，费用等合同上的需求，签订合同</p>
          </div>
        </div>
        <div class="service-item">
          <i class="iconfont icon-tianjiansuo"></i>
          <div class="text">
            <h3>提案阶段</h3>
            <p>完成网站初稿的设计，召开会议协商</p>
          </div>
        </div>
        <div class="service-item">
          <i class="iconfont icon-zhizuozhong"></i>
          <div class="text">
            <h3>制作阶段</h3>
            <p>完成所有页面的设计,前后端开发，并最后进行整合</p>
          </div>
        </div>
        <div class="service-item">
          <i class="iconfont icon-yanshou"></i>
          <div class="text">
            <h3>网站验收</h3>
            <p>客户进行网站的验收后，完成资金的交付</p>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 团队介绍 -->
  <div class="team" id="team">
    <section>
      <!-- 标题 -->
      <div class="team-title">
        <h2>团队介绍</h2>
      </div>
      <!-- 内容 -->
      <div class="team-content">
        <div class="card">
          <!-- 图片 -->
          <div class="card-img">
            <img src="./images/rw1.webp" alt="">
          </div>
          <!-- 文字 -->
          <div class="card-text">
            <h3>曾小藩</h3>
            <p>前端工程师</p>
            <div class="social-number">
              <a href="#"><i class="iconfont icon-weixin1"></i></a>
              <a href="#"><i class="iconfont icon-weibo1"></i></a>
              <a href="#"><i class="iconfont icon-git"></i></a>
              <a href="#"><i class="iconfont icon-in"></i></a>
            </div>
          </div>
        </div>
        <div class="card">
          <!-- 图片 -->
          <div class="card-img">
            <img src="./images/rw2.webp" alt="">
          </div>
          <!-- 文字 -->
          <div class="card-text">
            <h3>卓小龙</h3>
            <p>软件测试工程师</p>
            <div class="social-number">
              <a href="#"><i class="iconfont icon-weixin1"></i></a>
              <a href="#"><i class="iconfont icon-weibo1"></i></a>
              <a href="#"><i class="iconfont icon-git"></i></a>
              <a href="#"><i class="iconfont icon-in"></i></a>
            </div>
          </div>
        </div>
        <div class="card">
          <!-- 图片 -->
          <div class="card-img">
            <img src="./images/rw3.webp" alt="">
          </div>
          <!-- 文字 -->
          <div class="card-text">
            <h3>彭刺猬</h3>
            <p>数据库工程师</p>
            <div class="social-number">
              <a href="#"><i class="iconfont icon-weixin1"></i></a>
              <a href="#"><i class="iconfont icon-weibo1"></i></a>
              <a href="#"><i class="iconfont icon-git"></i></a>
              <a href="#"><i class="iconfont icon-in"></i></a>
            </div>
          </div>
        </div>
        <div class="card">
          <!-- 图片 -->
          <div class="card-img">
            <img src="./images/rw4.webp" alt="">
          </div>
          <!-- 文字 -->
          <div class="card-text">
            <h3>城小斌</h3>
            <p>后端工程师</p>
            <div class="social-number">
              <a href="#"><i class="iconfont icon-weixin1"></i></a>
              <a href="#"><i class="iconfont icon-weibo1"></i></a>
              <a href="#"><i class="iconfont icon-git"></i></a>
              <a href="#"><i class="iconfont icon-in"></i></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 数据 -->
  <section class="record">
    <!-- 数据列 -->
    <div class="record-list">
      <div class="record-item">
        <i class="iconfont icon-daima"></i>
        <h4>123</h4>
        <p>行代码</p>
      </div>
      <div class="record-item">
        <i class="iconfont icon-jiangxiang"></i>
        <h4>50</h4>
        <p>个奖项</p>
      </div>
      <div class="record-item">
        <i class="iconfont icon-kehu"></i>
        <h4>210</h4>
        <p>个客户</p>
      </div>
      <div class="record-item">
        <i class="iconfont icon-xiangmu"></i>
        <h4>351</h4>
        <p>个项目</p>
      </div>
    </div>
    <!-- 底部覆盖层 -->
    <div class="cover"></div>
    <!-- 底部图片 -->
    <div class="record-img">
      <!-- 如果想自由调整图片的位置，可以把图片设置为背景图片 -->
    </div>
  </section>

  <!-- 公司动态 -->
  <section class="dynamic" id="dynamic">
    <!-- 标题 -->
    <div class="dynamic-title">
      <h2>公司动态</h2>
      <p class="text-dark-gray">关注公司动态，了解公司的最新消息</p>
    </div>
    <!-- 内容 -->
    <div class="dynamic-content">
      <div class="dynamic-cart">
        <!-- 图片框 -->
        <div class="cart-img">
          <img src="./images/dt1.webp" alt="公司动态的图片1">
        </div>
        <!-- 卡片内容 -->
        <div class="cart-text">
          <!-- 时间和评论 -->
          <div class="date-comment">
            <span class="date">
              <i class="iconfont icon-rili"></i>
              2020年11月30日
            </span>
            <span class="comment">
              <i class="iconfont icon-goutong"></i>
              15评论
            </span>
          </div>
          <!-- 标题 -->
          <h3>公司夏日游，一直向前</h3>
          <!-- 文本内容 -->
          <p class="text-dark-gray">
            公司夏日组织公司人员一起去海边参加3日游，
            一起感受夏日烟火，海边清凉 和 公司的氛围；
            下次一起去吧，感受公司的美好风味。
          </p>
          <!-- 按钮 -->
          <a href="javascript:;">
            阅读更多
          </a>
        </div>
      </div>
      <div class="dynamic-cart">
        <!-- 图片框 -->
        <div class="cart-img">
          <img src="./images/dt2.jpg" alt="公司动态的图片1">
        </div>
        <!-- 卡片内容 -->
        <div class="cart-text">
          <!-- 时间和评论 -->
          <div class="date-comment">
            <span class="date">
              <i class="iconfont icon-rili"></i>
              2020年11月30日
            </span>
            <span class="comment">
              <i class="iconfont icon-goutong"></i>
              15评论
            </span>
          </div>
          <!-- 标题 -->
          <h3>公司夏日游，一直向前</h3>
          <!-- 文本内容 -->
          <p class="text-dark-gray">
            公司夏日组织公司人员一起去海边参加3日游，
            一起感受夏日烟火，海边清凉 和 公司的氛围；
            下次一起去吧，感受公司的美好风味。
          </p>
          <!-- 按钮 -->
          <a href="javascript:;">
            阅读更多
          </a>
        </div>
      </div>
      <div class="dynamic-cart">
        <!-- 图片框 -->
        <div class="cart-img">
          <img src="./images/dt3.jpg" alt="公司动态的图片1">
        </div>
        <!-- 卡片内容 -->
        <div class="cart-text">
          <!-- 时间和评论 -->
          <div class="date-comment">
            <span class="date">
              <i class="iconfont icon-rili"></i>
              2020年11月30日
            </span>
            <span class="comment">
              <i class="iconfont icon-goutong"></i>
              15评论
            </span>
          </div>
          <!-- 标题 -->
          <h3>公司夏日游，一直向前</h3>
          <!-- 文本内容 -->
          <p class="text-dark-gray">
            公司夏日组织公司人员一起去海边参加3日游，
            一起感受夏日烟火，海边清凉 和 公司的氛围；
            下次一起去吧，感受公司的美好风味。
          </p>
          <!-- 按钮 -->
          <a href="javascript:;">
            阅读更多
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- 尾款 -->
  <footer class="text-secondary">
    <!-- 顶部友情链接 -->
    <div class="top">
      <div class="footer-left">
        <dl>
          <dt>联系我们</dt>
          <dd>地址：中国xx省xx市xx区xx路xx号</dd>
          <dd>电话：0663-17876757431</dd>
          <dd>传值：2194520348321232</dd>
          <dd>电子邮件： 742317550@qq.com</dd>
        </dl>
      </div>
      <div class="footer-right">
        <dl>
          <dt>服务概览</dt>
          <dd><a href="#">网站搭建</a></dd>
          <dd><a href="#">网页设计</a></dd>
          <dd><a href="#">移动应用</a></dd>
          <dd><a href="#">域名购买</a></dd>
        </dl>
        <dl>
          <dt>成功案例</dt>
          <dd><a href="#">xx桌面应用</a></dd>
          <dd><a href="#">PC网站</a></dd>
          <dd><a href="#">xx小程序</a></dd>
          <dd><a href="#">xx软件</a></dd>
        </dl>
        <dl>
          <dt>公司动态</dt>
          <dd><a href="#">人员信息</a></dd>
          <dd><a href="#">公司福利</a></dd>
          <dd><a href="#">最近通知</a></dd>
        </dl>
        <dl>
          <dt>帮助与支持</dt>
          <dd><a href="#">帮助中心</a></dd>
          <dd><a href="#">联系客服</a></dd>
          <dd><a href="#">开发资源</a></dd>
        </dl>
      </div>
    </div>
    <!-- 底部版权 -->
    <div class="bottom text-light-gray">
      <p>广ICP备 12312334545-1 号</p>
      <p>@ 2020 穆土科技 - 有限公司官网 版权所有</p>
    </div>
    <!-- 返回顶部 -->
    <div class="to-top">
      <a href="#glide">
        <i class="iconfont icon-xiayiye- text-white"></i>
      </a>
    </div>
  </footer>

  <script src="./libs/anime/anime.min.js"></script>
  <script src="./libs/glide/glide.min.js"></script>
  <script src="./libs/isotope/isotope.pkgd.min.js"></script>
  <script src="./libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>